<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>管理员</el-breadcrumb-item>
      <el-breadcrumb-item>课程审核</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <el-table :data="allCourse" border style="width: 100%">
        <el-table-column type="index" label="序号" width="60" align="center">
        </el-table-column>
        <el-table-column
          prop="name"
          label="课程名称"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="username"
          label="作者"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="desc"
          label="课程描述"
          align="center"
          width="200"
        >
        </el-table-column>
        <el-table-column prop="hits" label="点击量" align="center" width="200">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="150"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="status" label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="seeCourseDetailInfo(scope.row.id)"
            >
              查看
            </el-button>
            <el-button
              size="mini"
              type="primary"
              @click="showPassIdentifyDialogVisible(scope.row)"
            >
              通过审核
            </el-button>
            <el-dialog
              title="提示"
              :visible.sync="passIdentifyDialogVisible"
              width="30%"
            >
              <span>确定通过课程审核？</span>
              <span slot="footer" class="dialog-footer">
                <el-button @click="passIdentifyDialogVisible = false"
                  >取 消</el-button
                >
                <el-button type="primary" @click="confirmPass">确 定</el-button>
              </span>
            </el-dialog>
            <el-button
              size="mini"
              type="primary"
              @click="showUnPassIdentifyDialogVisible(scope.row)"
              style="margin-left:10px"
            >
              不通过审核
            </el-button>
            <el-dialog
              title="提示"
              :visible.sync="unpassIdentifyDialogVisible"
              width="30%"
            >
              <span>确定不通过课程审核？</span>
              <span slot="footer" class="dialog-footer">
                <el-button @click="unpassIdentifyDialogVisible = false"
                  >取 消</el-button
                >
                <el-button type="primary" @click="confirmUnPass"
                  >确 定</el-button
                >
              </span>
            </el-dialog>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 查看课程具体资源信息 -->

    <el-dialog :visible.sync="courseSectionInfoVisible" width="60%">
      <h1 style="text-align:center">查看课程具体资源信息</h1>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="章节名称" width="180">
        </el-table-column>
        <el-table-column prop="order" label="章节顺序" width="180">
        </el-table-column>
        <!-- <el-table-column prop="address" label="章节图片"> </el-table-column> -->
        <!-- <el-table-column prop="address" label="章节音频"> </el-table-column> -->
        <el-table-column prop="cover" label="章节图片" width="350">
          <template width="40" slot-scope="scope">
            <img
              style="border:none;max-width:40%"
              :src="scope.row.pictureUrl"
            />
          </template>
        </el-table-column>
        <el-table-column prop="voice" label="章节音频" width="400">
          <template width="40" slot-scope="scope">
            <audio :src="scope.row.voiceUrl" controls="controls"></audio>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import {
  ReqGetCourseByStatus,
  ReqCheckCourseIdentity,
  ReqGetCourseById,
} from "../../request/index.js";
export default {
  data() {
    return {
      courseSectionInfoVisible: false,
      allCourse: [],

      passIdentifyDialogVisible: false,
      unpassIdentifyDialogVisible: false,
      temRow: {},
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
      ],
    };
  },
  methods: {
    seeCourseDetailInfo(courseId) {
      this.courseSectionInfoVisible = true;
      ReqGetCourseById({
        courseId: courseId,
      }).then((res) => {
        this.tableData = res.data.section;
        console.log(res.data.section);
      });
    },
    showPassIdentifyDialogVisible(row) {
      this.passIdentifyDialogVisible = true;
      this.temRow = row;
    },
    showUnPassIdentifyDialogVisible(row) {
      this.unpassIdentifyDialogVisible = true;
      this.temRow = row;
    },
    confirmPass() {
      console.log(this.temRow);
      console.log(this.temRow.id);
      this.passIdentifyDialogVisible = false;
      ReqCheckCourseIdentity({
        courseId: this.temRow.id,
        status: 3,
      }).then((res) => {
        if ((res.msg = "成功")) {
          this.$message({
            showClose: true,
            message: "操作成功",
            type: "success",
          });
        } else {
          this.$message({
            showClose: true,
            message: "操作失败",
            type: "warning",
          });
        }
        this.getCourse();
      });
    },
    confirmUnPass() {
      console.log(this.temRow);
      this.unpassIdentifyDialogVisible = false;
      ReqCheckCourseIdentity({
        courseId: this.temRow.id,
        status: 2,
      }).then((res) => {
        if ((res.msg = "成功")) {
          this.$message({
            showClose: true,
            message: "操作成功",
            type: "success",
          });
        } else {
          this.$message({
            showClose: true,
            message: "操作失败",
            type: "warning",
          });
        }
        this.getCourse();
      });
    },
    getCourse() {
      ReqGetCourseByStatus({
        identityStatus: 1,
      }).then((res) => {
        this.allCourse = res.data;
        console.log(res.data);
      });
    },
  },
  created() {
    ReqGetCourseByStatus({
      identityStatus: 1,
    }).then((res) => {
      this.allCourse = res.data;
      console.log(res.data);
    });
  },
};
</script>

<style scoped></style>
